<template>
    <div class="w100 h100 flex-auto">
        <vxe-table 
            class="vp-vxe-table"
            :style="{
                '--vxe-ui-font-color': 'var(--el-table-text-color)',
                '--vxe-ui-table-header-font-color': 'var(--el-text-color-secondary)',
                '--vxe-ui-table-footer-font-color': 'var(--el-table-text-color)',
                '--vxe-ui-table-row-height-default': '40px',
                '--vxe-ui-table-cell-padding-default': '8px 12px',
                '--vxe-ui-font-family': 'Helvetica Neue,Helvetica,PingFang SC,Hiragino Sans GB,Microsoft YaHei,SimSun,sans-serif',
            }"
            ref="tableRef"
            v-bind="$attrs"
            :height="flexible ? '100%' : ''"
            border
            stripe
            auto-resize
            empty-text="暂无数据/No datas."
            :row-config="rowConfig"
            :custom-config="customConfig"
            :column-config="columnConfig"
            :column-drag-config="columnDragConfig"
        >
            <slot></slot>
        </vxe-table>
    </div>
</template>

<script setup lang="ts" name="VpVxeTable">
import { ref, reactive, onMounted, getCurrentInstance } from 'vue';
import type { VxeTablePropTypes } from 'vxe-table';

    const props = defineProps({
        // 如果为true，则会占满高度；如果为false，则会占数据相应高度
        flexible: {
            type: Boolean,
            default: true,
        },
    });

    const tableRef = ref();
    const instance = getCurrentInstance();

    // 继承vxe-table的方法
    onMounted(() => {
        Object.values(tableRef.value).forEach((value) => {
            if (typeof value === "function") {
                instance.exposed[value.name] = (...args: any) => value(...args);
            }
        });
    });

    // 行配置信息
    const rowConfig = reactive<VxeTablePropTypes.RowConfig>({
        // 当鼠标移到行时，是否要高亮当前行
        isHover: true
    })

    // 个性化信息配置项
    const customConfig = reactive<VxeTablePropTypes.CustomConfig>({
        // 是否启用 localStorage 本地保存，会将列操作状态保留在本地（需要有 id）
        storage: true,
        // 自定义列是否允许列选中的方法，该方法的返回值用来决定这一列的 checkbox 是否可以选中
        checkMethod (row: any) {
            return row.column.type !== 'seq' && !row.column.fixed;
        }
    })

    // 列配置信息
    const columnConfig = reactive<VxeTablePropTypes.ColumnConfig>({
        // 每一列是否启用列宽调整
        resizable: true,
        // 是否启用列拖拽排序
        // drag: true,
    })

    // 列拖拽排序配置项
    const columnDragConfig = reactive<VxeTablePropTypes.ColumnDragConfig>({
        trigger: 'cell',
        // 是否显示拖拽按钮图标
        showIcon: false,
        // 是否显示拖拽辅助状态显示
        showGuidesStatus: true
    })


    defineExpose({
    })
</script>

<style scoped lang="scss">
    .vp-vxe-table {
        height: 100%;
        overflow: auto;
    }
    :deep(.vp-vxe-table .el-button, .vp-vxe-table .el-button.is-round) {
        padding: 0;
    }
</style>